<template>
  <div class="main">
    <div class="window-item" @click="sign(item)" v-for="item in list" :key="item.appointmentId">
      <div class="item-line">
        <div class="item-title">预约医生:</div>
        <div class="item-content">{{item.doctorName}}</div>
      </div>
      <div class="item-line">
        <div class="item-title">医生职称:</div>
        <div class="item-content">{{item.dLevel}}</div>
      </div>
      <div class="item-line">
        <div class="item-title">预约时间:</div>
        <div class="item-content">{{item.timesection}}</div>
      </div>
      <div class="item-line">
        <div class="item-title">预约状态:</div>
        <div class="item-content">
          <div v-if="item.flag === '0'">预约中</div>
          <div v-else-if="item.flag === '1'">已签到</div>
          <div v-else-if="item.flag === '2'">就诊中</div>
          <div v-else-if="item.flag === '3'">已叫号</div>
          <div v-else-if="item.flag === '4'">已过号</div>
          <div v-else-if="item.flag === '6'">已就诊</div>
          <div v-else>未知</div>
        </div>
      </div>
      <div class="item-btn" :class="{gray: item.flag !== '0'}">
        <div v-if="item.flag === '0'">签到</div>
        <div v-else>无法签到</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component } from 'vue-property-decorator'
import { mixins } from 'vue-class-component'
import ReservationMixin from '@/mixins/reservation'
import { IReservationListResponseData, IReservationSignQuery } from './interface/reservation'
import { ReservationSign } from './apis/reservation'

@Component
export default class Doctor extends mixins(ReservationMixin) {
  private list : IReservationListResponseData[] = []
  private async created () {
    this.setTip('请签到')
    this.logger.info('打开签到列表页')
    this.setMaxTime(60)
    this.updateTimeHandler('home')
    if (!this.store.state.reservationList || this.store.state.reservationList.length === 0) {
      this.$messageBox.show({
        content: '当前诊室没有签到信息',
        duration: 15,
        confirmText: '关闭',
        confirm: () => {
          this.home()
        },
        cancelText: '返回',
        cancel: () => {
          this.back()
        }
      })
    }
    this.list = this.store.state.reservationList
  }

  private busy = false
  /**
   * 挂号
   */
  private async sign (item: IReservationListResponseData) {
    if (item.flag !== '0') return
    if (this.busy) return
    this.busy = true
    this.showLoading('签到中...')
    this.logger.info(`开始签到, 用户:${this.store.state.patient?.Name}, 医生:${item.doctorName}`)
    const query : IReservationSignQuery = {
      AppointmentId: item.appointmentId
    }
    const result = await ReservationSign(query)
    this.hideLoading()
    this.busy = false
    if (result.data?.Code === 200) {
      this.logger.info(`签到成功, 用户:${this.store.state.patient?.Name}, 医生:${item.doctorName}`)
      this.$messageBox.show({
        content: '签到成功',
        duration: 15,
        confirmText: '关闭',
        confirm: () => {
          this.home()
        },
        cancelText: '返回',
        cancel: () => {
          this.back()
        }
      })
    } else {
      this.logger.info(`签到失败, ${result.data?.Message}. 用户:${this.store.state.patient?.Name}, 医生:${item.doctorName}`)
      this.$messageBox.show({
        content: `签到失败:${result.data?.Message}`,
        confirmText: '关闭',
        duration: 15,
        confirm: () => {
          this.home()
        },
        cancelText: '返回'
      })
    }
  }
}
</script>

<style scoped>
  .main {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    height: 100%;
    align-items: center;
  }
  .window-item {
    display: flex;
    flex-direction: column;
    width: 30rem;
    height: 30rem;
    background-color: white;
    color: #388cc1;
    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 30px;
    font-size: 2.9rem;
    margin: 1rem;
    padding: 1rem;
    position: relative;
  }
  .item-line {
    display: flex;
    text-align: left;
    width: 100%;
    line-height: 40px;
    margin-top: 15px;
  }
  .item-title{
    color:gray;
  }
  .item-content{
    margin-left: 10px;
    font-weight: bold;
  }
  .item-btn{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #388cc1;
    color: white;
    border-radius: 0 0 30px 30px;
    height: 70px;
    line-height: 70px;
  }
  .gray{
    background-color: gray;
  }
</style>
